<template>
    <div class="home" @scroll="ssss">
        <div class="top">
            <div class="header">
                <div @click="prev">
                    <img src="../assets/index.png" class="icon" alt="">
                </div>
                <div @click="search">
                    <img src="../assets/search.png" class="icon right" alt="">
                </div>
                <div  @click="more">
                    <img src="../assets/more.png" class="icon" alt="">
                </div>
            </div>
            <div class="serach"  v-if="isSearch">
                <img src="../assets/close.png" class="icon" alt=""  @click="close">
                <mt-search v-model="value" cancel-text="" placeholder="搜索"></mt-search>
                <mt-button type="primary" style="height: 36px">搜索</mt-button>
            </div>
            <mt-swipe @change="handleChange" class="color">
                <mt-swipe-item v-for="(img, index) of images" :key="index">
                    <img class="img" :src="img" alt="">
                </mt-swipe-item>
            </mt-swipe>
        </div>
        <div class="content">
            <div class="tabs">
                <div v-for="(tab,index) of tabs" :key="index" @click="anchor(index)" :class="selected == index ? 'active' : ''">{{ tab }}</div>
            </div>
            <div id="0">
                <div class="title">
                    <img src="../assets/more.png" style="background: #f00; width: 15px; height: 15px;margin-top: 10px;" alt="">
                    <span>产品介绍</span>
                </div>
                <div class="container">
                    <p>Wotetrack移动颚式破碎站是红星机器众多明星产品中的一员，它的诞生来自于北欧（履带破的发源地）同类产品的先进理念与我公司高品质主设备的融合。</p>
                    <p>Wotetrack移动颚式破碎站是红星机器众多明星产品中的一员，它的诞生来自于北欧（履带破的发源地）同类产品的先进理念与我公司高品质主设备的融合。</p>
                    <p>Wotetrack移动颚式破碎站是红星机器众多明星产品中的一员，它的诞生来自于北欧（履带破的发源地）同类产品的先进理念与我公司高品质主设备的融合。</p>
                    <p>Wotetrack移动颚式破碎站是红星机器众多明星产品中的一员，它的诞生来自于北欧（履带破的发源地）同类产品的先进理念与我公司高品质主设备的融合。</p>
                </div>
            </div>
            <div id="1">
                <div class="title">
                    <img src="../assets/more.png" style="background: #f00; width: 15px; height: 15px;margin-top: 10px;" alt="">
                    <span>客户现场</span>
                </div>
                <div class="container">
                    <p>Wotetrack移动颚式破碎站是红星机器众多明星产品中的一员，它的诞生来自于北欧（履带破的发源地）同类产品的先进理念与我公司高品质主设备的融合。</p>
                    <p>
                        <video src="../assets/3.mp4" style="max-width: 100%; max-height: 100%" controls ></video>
                    </p>
                    <p>Wotetrack移动颚式破碎站是红星机器众多明星产品中的一员，它的诞生来自于北欧（履带破的发源地）同类产品的先进理念与我公司高品质主设备的融合。</p>
                </div>
            </div>
            <div id="2">
                <div class="title">
                    <img src="../assets/more.png" style="background: #f00; width: 15px; height: 15px;margin-top: 10px;" alt="">
                    <span>性能特点</span>
                </div>
                <div class="container">
                    <p>Wotetrack移动颚式破碎站是红星机器众多明星产品中的一员，它的诞生来自于北欧（履带破的发源地）同类产品的先进理念与我公司高品质主设备的融合。</p>
                    <p>
                        <img src="../assets/1.jpg" style="max-width: 100%; max-height: 100%" alt="">
                    </p>
                </div>
            </div>
            <div>
                <div class="title">
                    <img src="../assets/more.png" style="background: #f00; width: 15px; height: 15px;margin-top: 10px;" alt="">
                    <span>性能特点</span>
                    <span style="margin-left: 200px;color: #666" @click="all">更多 >></span>
                </div>
                <div class="container">
                    <div class="flex">
                        <p v-for="a of 4" :key="a">
                            <img src="../assets/2.jpg" style="max-width: 100%; max-height: 100%" alt="">
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Home',
    data() {
        return {
            value: '',
            isSearch: false,
            images: [
                '//img.alicdn.com/bao/uploaded///gma.alicdn.com/bao/uploaded/i3/655110033/O1CN01locUBw1C79kEVzEbo_!!0-saturn_solar.jpg_200x200q90.jpg_.webp',
                '//img.alicdn.com/bao/uploaded/i3/670495795/O1CN01Fy60BR1sg9qMuUdfx_!!670495795.jpg_200x200q90.jpg_.webp',
                '//img.alicdn.com/bao/uploaded///gma.alicdn.com/bao/uploaded/i1/109286322/O1CN01koQAYT1wZWbNmF0hV_!!0-saturn_solar.jpg_200x200q90.jpg_.webp'
            ],
            selected: '0',
            tabs: ['产品介绍', '客户现场', '性能特点'],
            top: 100
        }
    },
    methods: {
        prev() {
            console.log('返回首页');
        },
        search() {
            console.log('2222');
            this.isSearch = true
        },
        more() {
            console.log('3333');
        },
        close() {
            this.isSearch = false
        },
        handleChange() {
            // console.log('2222');
        },
        anchor(index) {
            this.selected = index
            location.hash=index;
        },
        all() {
            console.log('更多');
        },
        ssss() {
            console.log('111');
        }
    }
}
</script>

<style lang="scss">
.home {
    .top {
        width: 100%;
        background: #6000e3;
        .header {
            display: flex;
            justify-content: space-between;
            padding: 1rem 1rem;
            box-sizing: border-box;
            .icon {
                width: 2rem;
                height: 2rem;
            }
            .right {
                margin-left: 16rem;
            }
        }
        .serach {
            display: flex;
            padding: 1rem 1rem;
            box-sizing: border-box;
            justify-content: space-between;
            .icon {
                width: 2rem;
                height: 2rem;
            }
            .mint-search {
                width: 70%;
                height: auto;
                /deep/ .mint-searchbar {
                    background: rgba(0, 0, 0, 0);
                    padding: 0;
                }
            }
            
        }
        .color {
            height: 20rem;
            .img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .content {
        .tabs {
            height: 30px;
            line-height: 30px;
            background: #18003e;
            display: flex;
            justify-content: space-around;
            div {
                width: 100%;
                color: #8c68c5;
                text-align: center;
                border-right: 1px solid #6000e3;
            }
            div:last-child {
                border: 0;
            }
            .active {
                background: #6000e3;
                border: 1px solid #6000e3;
                border-radius: 20px;
            } 
        }
    }
    .container {
        p{
            margin-top: 50px;
            padding: 0 10px;
        }
        .flex {
            p {
                width: 44%;
                text-align: center;
            }
            display: flex;
            flex-wrap: wrap;
        }
    }
    .title {
        width: 100%;
        height: 30px;
        margin-top: 10px;
        margin-left: 10px;
        span {
            display: inline-block;
            margin-left: 15px;
            height: 30px;
            line-height: 30px;
        }
       
    }
}
</style>
